<template>
  <div id="retrieve" class="theme_body">
    <div class="version_header">
      <div class="retrieve_header">
        <h1><span class="title">大宗建材服务平台</span><span>找回密码</span></h1>
      </div>
    </div>
    <div class="version_con">
      <div class="step-wrap">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="身份验证"> </el-step>
          <el-step title="获取验证码"></el-step>
          <el-step title="设置新密码"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>
      <div class="retrieve-con">
        <el-form ref="form" :model="form" label-width="100px">
          <div v-if="active === 0">
            <el-form-item label="用户名:">
              <el-input v-model.trim="userName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="验证码:">
              <div class="img_box">
                <el-input v-model.trim="imgCode" size="small"></el-input>
                <img @click="getImgCode" class="img_code" :src="img" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-button class="nextBtn" size="small" @click="next(1)" style="width: 100%"> 下一步 </el-button>
            </el-form-item>
          </div>
          <div v-else-if="active === 1">
            <el-form-item label="已绑定手机:">
              <el-input v-model.trim="phone" size="small" disabled>
                <el-button slot="append">{{ context }}</el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="短信验证码:">
              <div class="img_box">
                <el-input v-model.trim="smsCode" size="small"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-button class="exportBtn xyb" size="small" @click="previous" key="previous"> 上一步 </el-button>
              <el-button class="nextBtn xyb" size="small" @click="next(2)" key="next"> 下一步 </el-button>
            </el-form-item>
          </div>
          <div v-else-if="active === 2" class="setpassword">
            <el-form-item label="设定新密码:">
              <div class="img_box">
                <el-input v-model.trim="password" size="small"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="确定新密码:">
              <div class="img_box">
                <el-input v-model.trim="newpassword" size="small"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-button class="exportBtn xyb" size="small" @click="previous" key="previous"> 上一步 </el-button>
              <el-button class="nextBtn xyb" size="small" @click="next(3)" key="next"> 下一步 </el-button>
            </el-form-item>
          </div>
          <div v-else>
            <div class="success">
              <el-image style="width: 100px; height: 100px" :src="url" :fit="fit"> </el-image>
              <h1 style="font-size: 24px; margin-top: 30px">恭喜您，密码已修改成功！</h1>
              <p style="font-size: 16px; margin-top: 20px">请使用新密码登录，系统将在3秒后自动跳转！</p>
              <el-button class="loginBtn" size="small" @click="goLogin" key="next"> 去登录 </el-button>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: '',
      imgCode: '',
      smsCode: '',
      phone: '',
      active: 0,
      img: '',
      context: '获取验证码'
    }
  },
  mounted() {
    this.getImgCode()
  },
  methods: {
    goLogin() {
      this.$router.push('/login')
    },
    //获取图片验证码
    getImgCode() {
      this.$https({
        method: 'get',
        url: '/sys/captcha',
        data: {}
      })
        .then(res => {
          if (res.code === 0) {
            this.img = res.data.image
            this.uuid = res.data.uid
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    previous() {
      this.active--
    },
    next(val) {
      if (val === 1) {
        if (this.userName && this.imgCode) {
        } else {
          this.$message.error('用户名与验证码不能为空')
        }
      } else if (val === 2) {
      } else if (val === 3) {
      }
      this.active++
    }
  }
}
</script>
<style lang="less" scoped>
#retrieve {
  width: 100%;
  // padding: 0 360px;
  background: url(../assets/register_bg.png) no-repeat;
  background-size: 100% 100%;
  background-position: center 0;
  .version_header {
    width: 1200px;
    padding: 0 360px;
    border-bottom: 1px solid #ebebeb;
  }
  .step-wrap {
    padding: 80px 150px;
  }
  .retrieve-con {
    display: flex;
    justify-content: center;
    .nextBtn {
      color: #fff !important;
      background-color: #fa7355;
      border: 1px solid #fa7355 !important;
      padding: 9px 8px !important;
      margin-top: 30px;
      &:hover {
        color: #fa7355 !important;
        background-color: #fff;
        border: 1px solid #fa7355 !important;
      }
    }
    .xyb {
      width: 48%;
    }
    .success {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .loginBtn {
      margin-top: 50px;
      width: 130px;
      color: #fff !important;
      background-color: #fa7355;
      border: 1px solid #fa7355 !important;
      padding: 9px 8px !important;
      &:hover {
        color: #fa7355 !important;
        background-color: #fff;
        border: 1px solid #fa7355 !important;
      }
    }
  }
  .img_box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .img_code {
    cursor: pointer;
    width: 25%;
    float: left;
    margin-left: 5%;
    height: 32px;
  }
  .version_con {
    width: 1200px;
    padding: 0 360px;
  }
  .retrieve_header {
    width: 100%;
    height: 13vh;
    // line-height: 13vh;
    display: flex;
    align-items: center;
    color: #333333;
    h1 {
      text-align: left;
      display: flex;
      align-items: center;
      width: 1200px;
      font-size: 2.4vw;
      font-weight: 500;
      .title {
        text-align: left;
        font-size: 2.4vw;
        font-weight: 500;
        margin-left: 0;
        padding-right: 20px;
        // border-right: 1px solid #ebebeb;
      }
      span {
        font-size: 1.56vw;
        margin-left: 20px;
      }
    }
  }
}
</style>
<style lang="less">
#retrieve {
  .el-form-item {
    margin-bottom: 18px;
  }
  .el-step__icon {
    width: 48px;
    height: 48px;
    // background: #30c776;
  }
  .el-step__icon-inner {
    font-size: 24px;
    // color: #fff;
  }
  .el-step.is-horizontal .el-step__line {
    top: 24px;
  }
  .el-input-group > .el-input__inner {
    border: none !important;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: #d6d6d6 !important;
  }
  .el-input-group__append {
    background-color: #f0f1f2 !important;
    border: #d6d6d6 1px solid !important;
    span {
      color: #333333;
    }
  }
  .el-form-item__content {
    width: 280px;
  }
  .setpassword {
    .el-input__inner {
      width: 280px;
    }
  }
}
</style>
